/* COMMON CSS FOR ALL SLIDERS */
.slider { position: relative; }
.slider .nav { position: absolute;  height: 2em; bottom: 0;  left: 1px; z-index: 100; opacity: .90; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=90)"; filter: alpha(opacity=90);  background: #222222;  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4b4747', endColorstr='#222'); /* for IE */
background: -webkit-gradient(linear, left top, left bottom, from(#4b4747), to(#222)); /* for webkit browsers */
background: -moz-linear-gradient(top,  #4b4747,  #222); /* for firefox 3.6+ */  } 
.slider .nav a, #uobcms-content .slider .nav a, #uobcms-content-nonav .slider .nav a { color: white; border-bottom: none;  }
.slider .nav .next, .slider .nav .prev { display: block; text-indent: -9999px; width: 24px; height: 25px; outline: none;}
.slider .nav .next { background: url(/svn_jsonmatch/trunk/WWW/uob/cmsimages/slider-next.png) no-repeat top left; position: absolute; right: 4px; top: 0.25em  }
.slider .nav .next:hover { background: url(/svn_jsonmatch/trunk/WWW/uob/cmsimages/slider-next.png) no-repeat center left;}
.slider .nav .prev { background: url(/svn_jsonmatch/trunk/WWW/uob/cmsimages/slider-prev.png) no-repeat top left; position: absolute; left: 4px; top: 0.25em   }
.slider .nav .prev:hover { background: url(/svn_jsonmatch/trunk/WWW/uob/cmsimages/slider-prev.png) no-repeat center left; }
#uobcms-content .slider .nav .slide-numbers, #uobcms-content-nonav .slider .nav .slide-numbers { width: 150px; margin: 0 auto; padding: 7px 0 0 0;  text-align: center; }
.slider .nav .slide-numbers li, #uobcms-content .slider .nav .slide-numbers li, #uobcms-content-nonav .slider .nav .slide-numbers li { font-size: 75%; list-style-type: none; list-style-image: none; display: inline; margin: 0 4px 0 0; padding: 0 }
.slider .nav .slide-numbers a, #uobcms-content .slider .nav .slide-numbers a, #uobcms-content-nonav .slider .nav .slide-numbers a {   text-decoration: none; background: #181818; padding: 2px 6px; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; border-bottom: 1px solid #4b4747; border-right: 1px solid #4b4747; }
.slider .nav .slide-numbers a:hover { background: black }
.slider .nav .slide-numbers .activeSlide a {  font-weight: bold; background: #000000; color: #e1b555  }
.slider .more-link { text-transform: uppercase; letter-spacing: 1px; font-size: 75%; font-weight: bold; /* text color needs to be set at local level */ }
.more-link a:hover, #uobcms-content .more-link a:hover, #uobcms-content-nonav .more-link a:hover { text-decoration: underline;  }
.slider h1, .slider h2 { font-family: Georgia, "Times New Roman", Times, serif; }
.slider .pause { position: absolute; z-index: 200; }
.slider .pause a, #uobcms-content .slider .pause a, #uobcms-content-nonav .slider .pause a {   text-align: center;  width: 40px; position: absolute; color: white!important; left: 1px; top: 1px; opacity: .85; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=85)"; filter: alpha(opacity=85);  background: #222222;  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4b4747', endColorstr='#222'); /* for IE */
background: -webkit-gradient(linear, left top, left bottom, from(#4b4747), to(#222)); /* for webkit browsers */
background: -moz-linear-gradient(top,  #4b4747,  #222); /* for firefox 3.6+ */  color: white; padding: 3px 7px; display: block; text-decoration: none; font-size: 65%; font-weight: bold; letter-spacing: 1px; text-transform: uppercase; border-bottom: none; 
}
.slider-full-width .pause a { position: absolute; -webkit-border-top-right-radius: 4px; -moz-border-radius-topright: 4px; border-top-right-radius: 4px; left: 705px;  }
.slider-full-width .pause {  width: 758px; position: absolute;    }
.slide { position: absolute!important; left: 0; top: 0 }

/* FULL WIDTH SLIDERS */
.slider-full-width { position: relative; width: 760px;  height: 300px; margin: 10px 0 20px 0 }
.slider-full-width .nav { width: 758px; -webkit-border-bottom-right-radius: 4px;
		-moz-border-radius-bottomright: 4px; 
		border-bottom-right-radius: 4px;
		-webkit-border-bottom-left-radius: 4px;
		-moz-border-radius-bottomleft: 4px; 
		border-bottom-left-radius: 4px; } 
.slider-full-width h1 { /* color specified in local css on slide basis*/ margin: 0; padding: 30px 0 0 30px; font-family: Georgia, "Times New Roman", Times, serif;  /* colour size can be changed */  font-size: 150%; /* width can be changed */ width: 300px;  }
.slider-full-width p {  /* color specified in local css on slide basis*/  margin: 0; padding: 1em 0 0 30px; /* width can be changed */ width: 300px;  }
.slider-full-width .slide { height: 298px; width: 758px; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px;  border: 1px solid #dcdcdc; /* border around slides in case background is light colour */ }

/* full width with static block */
.slider-full-width-static-block { position: relative; margin: 10px 0 20px 0; height: 303px; }
.slider-full-width-static-block .slider-text-block { padding: 0 20px 10px 20px; width: 280px; height: 293px; position: absolute; left: 620px; top: 0;}

/* full width with text block */
.slider-full-width-with-text-block { position: relative; width: 758px; height: 236px;  border: 1px solid #dcdcdc; margin: 10px 0 20px 0 }
.slider-full-width-with-text-block .nav { width: 260px; left: 498px; }
.slider-full-width-with-text-block .slide {  border: 0; width: 758px; }
.slider-full-width-with-text-block .slider-text-block { padding: 0 20px 10px 20px; width: 220px; height: /* height can be changed, don't forget to take into account padding */ 226px; position: absolute; left: 498px; top: 0; }
.slider-full-width-with-text-block img { border: 0; }
.slider-full-width-with-text-block .slider-text-block h2 { font-size: 130%; line-height: 1.2; margin: 0; padding: 20px 0 0 0; }

/* 500px wide slider */
.slider-500-width { position: relative; width: 498px;  height: 236px;  border: 1px solid #dcdcdc;   }
.slider-500-width .nav { width: 498px; left: 0; }
.slider-500-width .slide {  border: 0;}
.slider-500-width .slide-caption { font-size: 80%; width: 428px; position: absolute;  bottom: 0.5em;  left: 1px; z-index: 101; color: white; margin: 0 35px; }
.slider-500-width .slide-caption p { width: 428px; text-align: center; margin: 0; text-shadow: rgba(0, 0, 0, 0.2) 0 1px 0; }
.slider-500-width .slide-caption p em { color: #999999; padding-right: 0.5em }

/* 240px wide slider */
.slider-240-width { position: relative; width: 238px;  height: 236px;  border: 1px solid #dcdcdc;   }
.slider-240-width .nav { width: 238px; left: 0; }

/* 620px slider on page with no nav */
.slider-nonav-620-with-text-block { position: relative; width: 618px; height: 242px;  border: 1px solid #dcdcdc; margin: 10px 0 20px 0 }
.slider-nonav-620-with-text-block .nav { width: 310px; left: 310px; }
.slider-nonav-620-with-text-block .slide {  border: 0; width: 618px; }
.slider-nonav-620-with-text-block .slider-text-block { padding: 0 20px 10px 20px; width: 270px; height: /* height can be changed, don't forget to take into account padding */ 232px; position: absolute; left: 310px; top: 0 }
.slider-nonav-620-with-text-block img { border: 0; }
.slider-nonav-620-with-text-block .slider-text-block h2 { font-size: 130%; line-height: 1.2; margin: 0; padding: 20px 0 0 0; }

/* adjustments for pages with nonav */
#uobcms-content-nonav .slider-full-width { width: 940px;  }
#uobcms-content-nonav .slider-full-width .nav { width: 938px; } 
#uobcms-content-nonav .slider-full-width .slide { width: 938px; }

#uobcms-content-nonav .slider-full-width-with-text-block { width: 938px;     }
#uobcms-content-nonav .slider-full-width-with-text-block .nav { width: 320px; left: 620px; }
#uobcms-content-nonav .slider-full-width-with-text-block .slide { border: 0; width: 938px; }
#uobcms-content-nonav .slider-full-width-with-text-block .slider-text-block {  width: 280px; left: 620px;  }
#uobcms-content-nonav .slider-full-width-with-text-block .slider-text-block h2 { font-size: 130%; line-height: 1.2 }

/* For using a Slider as a picture gallery */
.sliderThumbnails li {
	width: 90px; height: 90px;  text-align: center; display: block; padding: 0; margin: 0; float: left; 
}
    
.sliderThumbnails li a img {
	border: solid 1px #beb9a6;
	margin: 0;
}


.sliderThumbnails .selected img, .sliderThumbnails a:active img, .sliderThumbnails a:hover img  {
	border: solid 1px #beb9a6; 
	width: 84px; height: 84px;
	-moz-box-shadow: 0 0 6px #888;
	-webkit-box-shadow: 0 0 6px #888;
	box-shadow: 0 0 6px #888;
	position: relative; top: -3px
}

.sliderThumbnails { width: 640px; }

.pictureGallery .slider-text-block{ position: absolute; left: 640px; top: 0; width: 295px; padding-left: 5px;}
.pictureGallery { margin: 20px 0; overflow: auto; background: white url(/svn_jsonmatch/trunk/WWW/uob/cmsimages/slider-gallery-background.png) no-repeat 5px 0; }
.pictureGallery .slider { height: 414px;  }
.pictureGallery .slide { padding: 1px 0 0 6px;  }
#uobcms-content-nonav .pictureGallery .pause a { left: 6px; }

.pictureGallery .caption { opacity: .85; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=85)"; filter: alpha(opacity=85);  background: #222222;  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4b4747', endColorstr='#222'); /* for IE */
background: -webkit-gradient(linear, left top, left bottom, from(#4b4747), to(#222)); /* for webkit browsers */
background: -moz-linear-gradient(top,  #4b4747,  #222); /* for firefox 3.6+ */  color: white; padding: 5px 7px; width: 604px; position: absolute; bottom: 0; left: 6px;  z-index: 20;  color: white; font-size: 80%; margin: 0;  }

.pictureGallery .slide h2 { font-family: Arial; margin-top: 0; font-size: 21px }
